<template>
  <div class="ma">
    <div class="titleBar" :style="blockStyle">
      <div class="txt">
        <i
          :class="data.content.left_icon+' iconfont'"
          :style="colorLeftIcon"
          v-if="data.titleBarType == 0"
        ></i>
        <div class="txt-bar" v-if="data.titleBarType == 1" :style="barStyle"></div>
        <div class="txt-bar2" v-if="data.titleBarType == 2" :style="barStyle"></div>
        &nbsp;{{data.content.left}}
        <div class="txt-bar2" v-if="data.titleBarType == 2" :style="barStyle"></div>
      </div>
      <div
        class="cright"
        :style="posRightStyle"
        v-if="data.titleBarType == 0 || data.titleBarType == 1"
      >
        {{data.content.right}}&nbsp;
        <i :class="data.content.right_icon" :style="colorRightIcon"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  created() {},
  watch: {},
  computed: {
    blockStyle() {
      let s =
        "margin:" +
        this.data.margin.top +
        "px " +
        this.data.margin.lr / 2 +
        "px " +
        this.data.margin.bottom +
        "px;";
      s += "border-radius:" + this.data.radius / 2 + "px;";
      s += "background:" + this.data.color.bg + ";";
      s += "color:" + this.data.color.left + ";";
      s += "justify-content:" + this.data.posAlign + ";";
      return s;
    },
    colorLeftIcon() {
      return "color:" + this.data.color.left_icon + ";";
    },
    posRightStyle() {
      let s = "right:" + this.data.margin.lr / 4 + "px;";
      s += "color:" + this.data.color.right + ";";
      return s;
    },
    colorRightIcon() {
      return "color:" + this.data.color.right_icon + ";";
    },
    barStyle() {
      let s = "background:" + this.data.bar.bg + ";";
      s += "width:" + this.data.bar.width + "px;";
      s += "height:" + this.data.bar.height + "px;";
      return s;
    }
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.ma {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.titleBar {
  display: flex;
  //justify-content:flex-start;
  width: 100%;
  //background: #fff;
  height: 36px;
  line-height: 36px;
  display: flex;
  justify-content: center;
  position: relative;

  .txt {
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    .txt-bar {
      margin-right: 8px;
    }
    .txt-bar2 {
      width: 50px;
      height: 5px;
      background: #fbda41;
      margin: 0px 10px;
    }
  }

  .cright {
    position: absolute;
    //right: 0;
    top: 0;
    line-height: 36px;
    font-size: 12px;
    margin: 0;
    padding: 0 5px;
    font-size: 12px;
  }
}
</style>
